<template>
  <div class="outer">
    <div v-if="jobCollect.length === 0" class="otherpage">
      <p>暂无历史记录</p>
      <p>您可以前往职位列表页面浏览。</p>
    </div>
      <div
      v-else
        class="container"
        v-for="(item, index) in jobCollect"
        :key="index"
        title="点击可查看详情"
      >
        <div class="left">
          <img :src="item.logo" class="logo" />
          <div class="type">{{ item.industryType }}</div>
        </div>
        <div class="right">
          <div>
            <div class="above">
              <div class="company-name">{{ item.companyName }}</div>
              <div style="display: flex">
                <div class="positionName" style="width: 50%">
                  {{ item.respPerson }}
                </div>
                <div class="positionName">{{ item.respPos }}</div>
              </div>
            </div>
            <div class="under">
              <div class="position">{{ item.positionName }}</div>
              <div class="place">
                {{ item.province }} <span v-if="item.province">-</span>
                {{ item.city }} <span v-if="item.street">-</span>
                {{ item.street }}
              </div>
              <div class="position">{{ item.experience }}</div>
              <div class="place">{{ item.salary }}</div>
            </div>
          </div>
          <div class="under">
            <div>
              <el-button plain round @click="toDetail(item.positionId)"
                >查看详细</el-button
              >
              <!-- <el-link :underline="false"></el-link> -->
            </div>
            <div>
              <el-button
                type="danger"
                :icon="Delete"
                round
                style="padding: 10px 35px"
                @click="deJobCollect(item.id)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; margin-left: 30%; width: 100%">
      <el-pagination
        v-model:current-page="currentPage"
        :hide-on-single-page="true"
        :page-size="9"
        :size="size"
        :background="true"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
</template>


<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getHistoryJob, deleteJobHistory } from "@/api/position";
import { Delete } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage, ComponentSize } from "element-plus";

const router = useRouter();

//分页数据
const currentPage = ref(1);
const total = ref(0);
const size = ref<ComponentSize>("default");

onMounted(() => {
  queryJobCollect();
});
//获取职位收藏信息
const jobCollect = ref([]);
const queryJobCollect = async () => {
  const res = await getHistoryJob(currentPage.value, 9);
  if (res.code === 200) {
    jobCollect.value = res.data.list;
    total.value = res.data.total;
  } else {
    ElMessage.error("请检查网络问题，稍后重试");
  }
};

//分页变化
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  queryJobCollect();
};

//删除职位收藏信息
const deJobCollect = async (id) => {
  const res = await deleteJobHistory(id);
  if (res.code === 200) {
    ElMessage.success("删除成功");
    queryJobCollect();
  } else {
    ElMessage.error("请检查网络问题，稍后重试");
  }
};

//前往职位详细信息
const toDetail = (id) => {
  router.push(`/position/jobDetails?id=${id}`);
};
</script>

<style scoped>
.outer {
  width: 101%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container {
  display: flex;
  padding: 17px;
  border: 1px solid #ccc;
  width: 300px;
  /* background: rgba(255, 255, 255, 0.3);
   */
  background: #8ca9aa;
  backdrop-filter: blur(10px);
  border-top: 1px solid #ffffff50;
  border-left: 1px solid #ffffff50;
  border-radius: 15px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.container:hover {
  /* background: rgba(255, 255, 255, 0.5); */
  background: rgba(140, 169, 170, 0.5);
}

.left {
  width: 30%;
}

.logo {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: #ccc;
  border-radius: 50%;
  margin-right: 20px;
}

.type {
  margin-top: 40px;
  margin-bottom: 10px;
  margin-left: 10px;
  box-sizing: border-box;
  /* color: #cbcbcb;
   */
  color: #fff;
  writing-mode: vertical-rl;
  /* 从上到下，从右到左 */
  text-orientation: mixed;
  /* 保持中文字符的自然方向 */
  display: inline-block;
  /* 使 writing-mode 生效 */
}

.right {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.company-name {
  /* color: #fff; */
  color: #cbcbcb;
  width: 100%;
  font-size: 20px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.positionName {
  margin-bottom: 10px;
  box-sizing: border-box;
  /* color: #cbcbcb;
   */
  color: #fff;
  margin-top: 20px;
}

.under {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  color: #cbcbcb;
}

.position,
.place,
.tags,
.salary {
  width: 50%;
  margin: 10px 0;
  color: #fff;
}

.otherpage {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 16px;
  margin-top: 50px;
}

.el-link {
  color: #fff;
}

.el-link:hover {
  color: #409eff;
}

.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>